import React,{Component} from 'react'
import { Form, Input, Button,message } from 'antd';
import './login.css'

export default class loign extends Component{
    //设置用户名和密码的状态
    constructor(props){
        super(props);
        this.state = {
            userName: "",
            userPassword: "",
        }
    }
    //改变用户名的状态
    changeUsername(e){
        this.setState({
            userName:e.target.value
        })
    }
    //改变密码的状态
    changePassword(e){
        this.setState({
            userPassword:e.target.value
        })
    }
    //登录按钮，获取用户名和密码
    handleClick(){
        this.axios.post("/user/login",{
            usr:this.state.userName,
            pwd:this.state.userPassword
        }).then(res=>{
            if(res.data.code===200){
                message.success('登录成功');
                window.localStorage.setItem("user",res.data.user);
                window.localStorage.setItem("token",res.data.token);
                this.props.history.push('/index');
            }else{
                message.error("用户名和密码不能为空或者用户名和密码错误哦！！");
            }
        })
    }
    //跳转到注册页面
    registerClick(){
        this.props.history.push("/register")
    }
    render(){
        return(
            <div className="login">
                <div className="loginForm">
                    <h1>用户登录</h1>
                    <Form
                        name="basic"
                    >
                        <Form.Item
                            name="userName"
                            rules={[{ required: true, message: '请输入账号！' }]}
                        >
                            <Input placeholder="账号" onChange={this.changeUsername.bind(this)}/>
                        </Form.Item>

                        <Form.Item
                            name="userPassword"
                            rules={[{ required: true, message: '请输入密码！' }]}
                        >
                            <Input.Password placeholder="密码" onChange={this.changePassword.bind(this)}/>
                        </Form.Item>

                        <Form.Item >
                            <Button
                                type="primary"
                                className="loginBtn"
                                onClick={this.handleClick.bind(this,this.state.userName,this.state.userPassword)}
                            >
                                登录
                            </Button>
                            <Button
                                type="text"
                                className="loginBtn"
                                onClick={this.registerClick.bind(this)}
                            >
                                没有账号？去注册
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        )
    }
}